<template>
    <div id="circle">
    <header>
      <van-nav-bar title="本地" right-text="发布">
            <template #left>
                <van-icon name="search" size="18"  @click="search"/>
            </template>

        </van-nav-bar>
    </header>

    <main>

      <van-cell-group v-for="(item,index) in list">
      <!-- 顶部头像名称 -->
      <div class="maintop">
          <van-image
            round
            width="3rem"
            height="3rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="maintopbox">
          <p>{{item.name}}<van-button type="primary" size="mini" color="skyblue">{{item.identity}}</van-button>
          </p>
          <p>{{item.time}}</p>
          </div>
          <div class="maintopright">
            <van-button icon="plus" type="primary" size="mini" color="skyblue">{{item.attention}}</van-button>
            <p @click="del(index)">×</p>
          </div>
      </div>  

      <!-- 文字 -->
      <div class="maintext">
      <p>
      {{item.text}}
      </p>
      
      </div>
      
      <!-- 图片 -->
      <div class="maincenter">
        <van-image
            width="114"
            height="114"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <van-image
            width="114"
            height="114"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <van-image
            width="114"
            height="114"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <van-image
            width="114"
            height="114"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <van-image
            width="114"
            height="114"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
      </div>  
      
      <!-- 底部 -->
      <div class="mainbottom">
        <van-button round type="info"  size="mini" color="#b0b0b0">{{item.location}}</van-button>
        <div class="icon">
          <van-icon name="chat-o" />{{item.watch}}
        </div>
        <div class="icon">
          <van-icon name="chat-o" />{{item.like}}
        </div>
        <div class="icon">
          <van-icon name="chat-o" />{{item.comment}}
        </div>
        <van-icon name="chat-o" />
      </div>

      </van-cell-group>
    
 
    </main>

      <footer>
        <van-tabbar v-model="active">
          <van-tabbar-item name="home" icon="wap-home-o" @click="home">战役</van-tabbar-item>
        <van-tabbar-item name="circle" icon="location-o" >圈子</van-tabbar-item>
        <van-tabbar-item name="melancholy" icon="add-o"  @click="melancholy">寻医</van-tabbar-item>
        <van-tabbar-item name="news" icon="chat-o"  @click="news">消息</van-tabbar-item>
        <van-tabbar-item name="mine" icon="smile-o"  @click="mine">我的</van-tabbar-item>
        </van-tabbar>
      </footer>
    </div>
</template>
  
  <script>
export default {
  data() {
    return {
      active: 'circle',
      list:[
        {
          name:"张美丽",
          identity:"学生",
          text:"新的一年了，刚度过不平凡的一年，希望疫情能早点结束。白衣天使们辛苦了",
          imgsrc:"https://img01.yzcdn.cn/vant/cat.jpeg",
          time:"2022-2-2",
          attention:"关注",
          location:"北京 | 昌平区",
          watch:"999",
          like:'999',
          comment:"999"
        },
        {
          name:"不美丽",
          identity:"学生",
          text:"新的一年了，刚度过不平凡的一年，希望疫情能早点结束。白衣天使们辛苦了",
          imgsrc:"https://img01.yzcdn.cn/vant/cat.jpeg",
          time:"2022-2-2",
          attention:"关注",
          location:"北京 | 昌平区",
          watch:"999",
          like:'999',
          comment:"999"
        },
      ]
    }
  },
  methods:{
    home(){
    this.$router.push("/home")
   },
   melancholy(){
    this.$router.push("/melancholy")
   },
   news(){
    this.$router.push("/news")
   },
   mine(){
    this.$router.push("/mine")
   },
   search(){
    this.$router.push("/search")
   },
   del(index){
    this.list.splice(index,1)
   }
  }
    
}
  </script>

<style scoped lang="less">
  p{
    margin: 0;
  }
  header{
    margin-bottom: 10px;
  }
  main{
    .van-cell-group{
      margin-bottom: 20px;
    .maintop{
      margin-top: 10px;
      display: flex;
      padding: 0 10px;
      position: relative;
      .maintopbox{
        margin-left: 10px;
        p:nth-of-type(1){
          display: flex;
          margin-bottom: 6px;
          .van-button {
            margin-left: 10px;
          }
        }
      }
      .maintopright{
        position: relative;
        display: flex;
        right: 20px;
        position: absolute;
       .van-button{
        top:16px;
        right: 24px;
       }
       p{
        font-size: 24px;
        color: #666666;
       }
        
      }
    }
    .maincenter{
      padding: 0 10px;
      .van-image{
        margin-right: 8px;
      }
    }
    .maintext{
      padding: 0 10px;
      font-size: 14px;
      color:#666666;
      margin: 14px 0;
    }
    .mainbottom{
      display: flex;
      justify-content: space-around;
      margin: 10px 0;
    }
  }
  }
  footer{
       .van-hairline--top-bottom{
         .van-tabbar-item{
           font-size: 16px;
         }
       }
     }

</style>

  
  
  